define(['registry', 'views/form'],

function(app_registry, Form) {
  var ListItemView = Backbone.View.extend({
    tagName: 'tr',

    template: _.template($('#list-item-template').html()),

    events: {
      'click td': 'showDetail',
      'click .toggle':  'toggleCompleted',
      'dblclick label': 'edit',
      'click .destroy': 'clear',
    },

    initialize: function() {
      this.listenTo(this.model, 'change', this.render);
      this.listenTo(this.model, 'destroy', this.remove);
    },

    render: function() {
      this.$el.html(this.template(this.model.toJSON()));
      return this;
    },

    edit: function() {
      new Form({ model: this.model });
    },

    showDetail: function() {
      $('#item-detail-view').trigger('update_detail', { id: this.model.id })
    },

    toggleCompleted: function() {
      this.model.toggle();
    },

    clear: function() {
      if (confirm('?')) {
        this.model.destroy()
      }
    }
  });

  return ListItemView;
});
